<template>
    <div class="ann">
        <h1>安浪axios测试组件</h1>
        <button type="primary" @click="doGET">GET请求</button>
        <button type="primary" @click="doPOST">POST请求</button>
    </div>
</template>

<script>
    /* eslint-disable no-console */
    export default {
        name: "Ann",
        methods: {
            doGET(){
                console.log('GET请求事件')
                this.$axios.get('http://www.httpbin.org/get',{
                    params: {name:'jiankian',age:23},
                    headers:{'Ann-X-Page':'Ann','Ann-X-Name':'Ann Components','Ann':'ANLINE'}
                })
                    .then((res)=>{
                        console.log('请求成功')
                        console.log(res)
                        console.log('返回数据')
                        console.log(res.data)
                    })
                    .catch((err)=>{
                        console.log('请求失败')
                        console.log(err)
                    })
                    .finally(()=>{
                        console.log('请求结束')
                    })
            },
            doPOST(){
                console.log('POST请求事件')
                this.$axios.post('http://www.httpbin.org/post',
                    {
                        name:'安浪',
                        age:23,
                        address:'云南楚雄',
                    },{
                    headers:{'Ann-X-POST' : 'POST ANN','X-Token':'POST JWT Token'}
                    })
                    .then((res)=>{
                        console.log('POST请求成功')
                        console.log(res)
                        console.log('POST数据')
                        console.log(res.data)
                    })
                    .finally(()=>{
                        console.log('POST请求结束')
                    })
            }
        }
    }
</script>

<style scoped>
    .ann{
        background: deeppink;
    }
</style>